<template>
  <el-drawer
    :model-value="isShow"
    direction="rtl"
    :show-close="false"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    :title="!!curRecord ? '编辑***' : '创建***'"
    @open="onOpen"
    @closed="onCancel"
    size="500px">
    <div class="pr-20">
      <el-form class="edit-form" :model="formData" ref="formRef" :rules="rules" label-width="100px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入****" />
        </el-form-item>
        <el-form-item label="cron表达式" prop="logicConfig">
          <el-input v-model="formData.logicConfig" placeholder="请输入cron表达式">
            <template #append>
              <el-tooltip content="配置cron表达式" placement="top">
                <el-button
                  :icon="ArrowDown"
                  @click="
                    () => {
                      isShowCronCore = !isShowCronCore;
                    }
                  " />
              </el-tooltip>
            </template>
          </el-input>
        </el-form-item>
        <div style="width: 100%; padding-left: 10px; margin-top: -5px" v-show="isShowCronCore">
          <yu-cron @change="changeCron" v-model:value="formData.logicConfig" />
        </div>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel">取 消</el-button>
        <el-button type="primary" v-if="modalType != 'view'" :loading="submiting" @click="onSubmit">确 定</el-button>
      </span>
    </template>
  </el-drawer>
</template>
<script setup>
  import {ref, reactive} from 'vue';
  import {ArrowDown} from '@element-plus/icons-vue';

  // 其他代码省略*******// 定义数据
  const isShowCronCore = ref(true); // 是否打开cron表达式配置框
  const submiting = ref(false); // 是否正在提交中
  const formRef = ref(null);
  const formData = reactive({
    // 表单数据
    name: '', // 名称
    logicConfig: '* * * * * ? *', // cron表达式
  });

  const changeCron = val => {
    if (typeof val !== 'string') return false;
    formData.logicConfig = val;
  };
</script>
